<template>
    <view>
        <view class="footer w100">
            <view class="footer-content space-between align-center pr-20 pl-20">
                <view class="c-m price">
                    <text class="ft-24">￥</text>
                    <text class="ft-46 bold">{{ roomInfoPriceResp.totalPrice || '0' }}</text>
                </view>
                <view class="align-center">
                    <view class="ft-26 pr-20 c-m" @click="popupShow = !popupShow">费用明细</view>
                    <hj-login>
                        <view class="footer-btn center ft-30 t-w br-44 bold" @click="submit">
                            去支付
                        </view>
                    </hj-login>
                </view>
            </view>
            <hj-safe-footer />
        </view>
        <view>
            <view class="footer-safe"></view>
            <HjSafeFooter />
        </view>
        <up-popup
            :show="popupShow"
            @close="popupShow = false"
            :closeable="true"
            round="30rpx"
            :z-index="900"
        >
            <view>
                <view class="pb-40 pl-30 pr-30">
                    <view class="ft-36 t-3 center bold pt-24 pb-24">费用明细</view>
                    <view class="space-between align-center pb-10">
                        <view class="ft-32 t-3 bold">房费</view>
                        <view class="c-m ft-26"
                            >￥<text class="ft-42 bold">{{
                                roomInfoPriceResp.totalPrice || '0'
                            }}</text></view
                        >
                    </view>
                    <scroll-view class="main" :scroll-y="true">
                        <view
                            class="space-between align-center ft-26 t-6 mt-10"
                            v-for="(item, index) in roomInfoPriceResp.detailRespList"
                            :key="index"
                        >
                            <view>
                                {{ item.saleDate || '' }}
                                {{
                                    index === 0 || !breakfastCount
                                        ? '无早餐'
                                        : breakfastCount + '份早餐/间'
                                }}
                            </view>
                            <view v-if="index !== roomInfoPriceResp.detailRespList.length">
                                <text>{{ roomNum || 1 }} x </text>￥{{ item.sellPrice || '' }}
                            </view>
                            <view v-else>离店日期</view>
                        </view>
                        <view class="space-between align-center ft-26 t-6 mt-10">
                            <view>
                                {{ checkInInfo.endDate || '' }}
                                {{ breakfastCount ? breakfastCount + '份早餐/间' : '无早餐' }}
                            </view>
                            <view>离店日期</view>
                        </view>
                    </scroll-view>
                    <view class="text-right mt-20 popup-bot pt-20 ft-26">
                        <view>实际花费 ￥{{ roomInfoPriceResp.totalPrice || '0' }}</view>
                        <view>
                            <text>每间每晚均价 </text>￥{{ roomInfoPriceResp.averagePrice || '0' }}
                        </view>
                    </view>
                </view>
                <view>
                    <view class="footer-safe"></view>
                    <HjSafeFooter />
                </view>
            </view>
        </up-popup>
    </view>
</template>

<script setup>
/**
 * @description 底部
 * @author yinzhi
 * @date 2025-05
 */
import { ref, defineComponent, computed } from 'vue'
defineComponent({
    name: 'PreFooter'
})
const props = defineProps({
    info: {
        type: Object,
        default: () => {}
    },
    roomNum: {
        type: Number,
        default: 1
    }
})
import { useStore } from 'vuex'
const store = useStore()
// 入住信息
const checkInInfo = computed(() => store.state.platform.checkInInfo || '')

const roomInfoPriceResp = computed(() => props.info.roomInfoPriceResp || {})
const roomTypeInfoDetailResp = computed(() => props.info.roomTypeInfoDetailResp || {})
const breakfastCount = computed(() => roomTypeInfoDetailResp.value.breakfastCount || 0)

const popupShow = ref(false)

const emit = defineEmits(['preOrder'])

// 跳转预下单页面
const submit = () => {
    emit('submit')
}
</script>

<style scoped lang="scss">
.main {
    max-height: 510rpx;
}
.popup-bot {
    border-top: 1px solid #e1e1e1;
}
.footer-safe {
    height: 120rpx;
    width: 100%;
}
.footer {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1001;
    background: $uni-bg-color;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.08);
    &-content {
        height: 120rpx;
    }
    &-btn {
        width: 260rpx;
        height: 80rpx;
        background: $uni-color-primary;
    }
}
</style>
